$co-m-horizontal-nav__menu-item-link-padding-lr: ($grid-gutter-width / 2);

.co-m-horizontal-nav__menu {
  border-bottom: 1px solid $color-grey-background-border;
  display: flex;
  flex-shrink: 0; // prevent collapse of tabs
  list-style: none;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  @media (min-width: $grid-float-breakpoint) {
    padding-left: $co-m-horizontal-nav__menu-item-link-padding-lr;
  }
  &--within-sidebar {
    border-top: 1px solid $color-grey-background-border;
    margin-bottom: $grid-gutter-width;
    margin-left: -($grid-gutter-width / 2);
    margin-right: -($grid-gutter-width / 2);
    overflow: visible; // so focus indicator is not clipped since these don't need to scroll
    @media (min-width: $grid-float-breakpoint) {
      margin-left: -($grid-gutter-width);
      margin-right: -($grid-gutter-width);
    }
    .co-m-horizontal-nav__menu-item {
      font-size: 16px;
      line-height: normal;
    }
  }
  &--within-overview-sidebar {
    margin-left: 0;
    margin-right: 0;
    padding-left: 5px;
  }
}

.co-m-horizontal-nav__menu-item {
  font-size: 18px;
  a,
  button {
    background: transparent;
    border: 0;
    color: $color-pf-black-700;
    display: block;
    padding: 6px $co-m-horizontal-nav__menu-item-link-padding-lr 8px;
    position: relative;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #252525;
      text-decoration: none;
      &::after {
        background: $color-pf-black-400;
      }
    }
    &::after {
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      left: $co-m-horizontal-nav__menu-item-link-padding-lr;
      position: absolute;
      right: $co-m-horizontal-nav__menu-item-link-padding-lr;
    }
  }
  &.co-m-horizontal-nav-item--active {
    a,
    button {
      color: $link-color;
      &::after {
        background: $link-color;
      }
    }
  }
  &:last-child {
    @media (min-width: $grid-float-breakpoint) {
      a,
      button {
        margin-right: $co-m-horizontal-nav__menu-item-link-padding-lr;
      }
    }
  }
}
